<template>
    <div class="content-page">
        <div class="content-nav">
            <el-breadcrumb class="breadcrumb" separator="/">
                <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>免疫管理</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="operation-nav">
                <el-button type="primary" icon="plus" @click="addRecord">新建记录</el-button>
            </div>
        </div>
        <div class="content-main">
            <div class="filter-box">
                <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="filterForm.phone" placeholder="请输入手机号"
                                  clearable @change="onSubmitFilter"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmitFilter">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker type="date" v-model="filterForm.next_date" placeholder="请选择下次免疫起始日期"
                                        clearable value-format="timestamp">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmitNotify">查询提醒</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-table-box">
                <el-table :data="tableData" style="width: 100%" border stripe>
                    <el-table-column align="center" prop="id" label="记录ID" width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="phone" label="手机号" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="detail" label="用户信息">
                    </el-table-column>
                    <el-table-column align="center" prop="type" label="免疫类型" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type === 1">年度免疫</span>
                            <span v-if="scope.row.type === 2">首免第一针</span>
                            <span v-if="scope.row.type === 3">首免第二针</span>
                            <span v-if="scope.row.type === 4">首免第三针</span>
                            <span v-if="scope.row.type === 5">首免第四针</span>
                            <span v-if="scope.row.type === 6">已免疫</span>
                            <span v-if="scope.row.type === 0">未免疫</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="date" label="免疫时间" :formatter="dateFormat" width="120">
                    </el-table-column>
                    <el-table-column align="center" prop="next_date" label="下次免疫时间" :formatter="dateFormat" width="120">
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="160">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="handleRowEdit(scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="handleRowSuccess(scope.row)">完成</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-box">
                <el-pagination @current-change="handlePageChange" :current-page="page" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      page: 1,
      total: 0,
      filterForm: {
        phone: '',
        next_date: '',
        is_notify: ''
      },
      tableData: []
    }
  },
  methods: {
    handlePageChange (val) {
      this.page = val
      // 保存到localStorage
      localStorage.setItem('userPage', this.page)
      localStorage.setItem('userFilterForm', JSON.stringify(this.filterForm))
      this.getList()
    },
    addRecord () {
      this.$router.push({ name: 'immune_add', query: {phone: this.filterForm.phone} })
    },
    handleRowEdit (row) {
      this.$router.push({ name: 'immune_add', query: {id: row.id, phone: row.phone} })
    },
    handleRowSuccess (row) {
      console.log(row)
      this.$db.immune.update({id: row.id}, {is_notify: !row.is_notify}, (err, count) => {
        if (err) console.error('kumeng: ' + err.stack)
        if (count) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
        }
      })
    },
    handleRowDelete (row) {
      this.$confirm('确定要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$db.records.remove({id: row.id}, (err, count) => {
          if (err) console.error('kumeng: ' + err.stack)
          if (count) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          this.getList()
        })
      })
    },
    dateFormat (row, column, cellValue, index) {
      let t = new Date(cellValue)
      let year = t.getFullYear()
      let month = t.getMonth() + 1
      let day = t.getDate()
      let newTime = year + '-' +
        (month < 10 ? '0' + month : month) + '-' +
        (day < 10 ? '0' + day : day)
      return newTime
    },
    onSubmitFilter () {
      this.page = 1
      this.filterForm.is_notify = false
      this.getList()
    },
    onSubmitNotify () {
      this.page = 1
      this.filterForm.is_notify = true
      this.getList()
    },
    getList () {
      let query = {phone: new RegExp(this.filterForm.phone)}
      let sort = {}
      if (this.filterForm.is_notify) {
        if (this.filterForm.next_date) query.next_date = {$gt: this.filterForm.next_date}
        query.is_notify = true
        sort = {next_date: 1}
      } else {
        sort = {date: -1}
      }
      this.$db.immune.find(query).exec((err, docs) => {
        if (err) console.error('kumeng: ' + err.stack)
        this.total = docs.length
      })
      this.$db.immune.find(query).sort(sort).skip(10 * this.page - 10).limit(10).exec((err, docs) => {
        if (err) console.error('kumeng: ' + err.stack)
        this.tableData = docs
      })
    }
  },
  components: {

  },
  mounted () {
    // this.user_id = this.$route.query.user_id || 0
    this.filterForm.phone = this.$route.query.phone || ''
    this.getList()
  },
  name: 'ImmunePage'
}
</script>

<style scoped>

</style>
